<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>
    *{
    box-sizing: border-box;
}
body{
    min-width: 1150px;
    margin: 0;
    background-image: url(img/bg.jpg);
    background-attachment: fixed;

}
/*第一部分*/
header{
        min-width: 1150px;
        overflow: hidden;
        height: 180px;
}
header img{
    width: 80px;
    margin: 50px 7%; 

}
header img:hover{
    animation: img 0.5s  linear 3;
}
@keyframes img{
    0%{
        transform:translate(0) rotate(0deg) ;
    }
    100%{
        transform: translate(100px) rotate(360deg) ;
    }
}
ul{
    width: 400px;
    margin: 0;
    padding: 0;
    float: right;
    list-style: none;
    overflow: hidden;
    margin: 80px 6%;
} 
ul li{
    float: left;
    margin: 0 35px;
    
}

ul li a{
    display: block;
    width: 60px;
    height: 50px;
    text-decoration: none;
    color: white;
    font-size: 14px;
    padding: 12px 15px;
    transition: 1s;
    border: solid 1px rgba(0, 0, 0, 0);    
}
header ul li a:hover{
    border: solid 1px white;
    color: black;
}
main{
    min-width: 1150px;
}
/*第二部分*/
main .intro,main .inter,main .example,footer section{
    width: 1150px;
    height: 200px;
    margin: 0 auto;
    color: white;
}
main .intro h1{
    margin:0 0 40px 0;
}
main .intro p{
    font-size: 15px;
    font-family: "黑体";
}
main .inter{
    margin: 0 auto;
}
main .inter div{
    display: inline-block;
    position: relative;
    width: 150px;
    height: 50px;
    margin: 0 18px 10px 0;
}
main .inter div span{
    display: block;
    color: white;
    position: absolute;
    z-index: 2;
    width: 150px;
    height: 50px;
    text-align: center;
    padding-top: 15px;
}
main .inter div p{
    position: absolute;
    width: 150px;
    height: 50px;
    background: blue;
    opacity: 0.3;
    top: -18px;
    z-index: 1;
    transition: 2s;
}
main .inter div:hover p{
    opacity: 0.5;
}
main .example{
    height: 600px;
} 
main .example div,main .example div img,
main .example div span,main .example div p{
    width: 320px;
    height: 230px;
}
main .example div{
    display: inline-block;
    position: relative;
    margin: 0 50px 10px 0;
}
main .example div img{
    display: inline-block;
    position: absolute;
    
}
main .example div span{
    display: block;
    color: white;
    border: solid 1px red;
    position: absolute;
    z-index: 2; 
    text-align: center;
    padding-top: 100px;
    opacity: 0;
    transition: 2s;
}
main .example div p{
    position: absolute;
    background-color: white;
    opacity: 0.1;
    top: -18px;
    z-index: 1;
    transition: 2s;
}
main .example div:hover span{
    opacity: 1;
}
main .example div:hover p{
    opacity: 0;
}
/*第三部分*/
footer{
    height: 500px;
    min-width: 1150px;
    overflow: hidden;
}
footer div{
    overflow: hidden;
}
footer div p{
    float: left;
}
footer div .p1{
    margin-left:80px; 
}
footer div p span{
    display: inline-block;
    height: 35px;
    text-align: center;
    padding-top:5px; 
}
footer div p .s1,footer div p .s3{
    background-color: white;
    color: black;
    width: 60px;
}
footer div p .s2{
    background-color: black;
    width: 200px;
}
footer div p .s4{
    background-color: black;
    width: 150px;
}
footer form input,footer select{
    float: left;
    width: 320px;
    height: 45px;
    margin-right:50px; 
}
footer section .d1{
    overflow: hidden;
    width: 1060px;
    margin-top: 50px;
}
footer .d1 textarea,footer .d1 input{
    float: left;
    height:50px;
    width: 500px;
}
footer .d1 textarea{
    float: left;
    padding-top:12px; 
}
footer .d1 input{
    float: right;
    background-color:#6495ED; 
    border: none;
}
footer section p{
    margin-top: 60px;
}
body > ul{
    position: fixed;
    right: -330px;
    bottom: -30px;
}
body>ul li a{
    border: solid 1px white;
}
</style>
<body>
    <header>
        <nav>
            <img src="img/logo.png">
            <ul>
                <li>
                    <a href="*">关于</a>
                </li>
                <li>
                    <a href="*">工作</a>
                </li>
                <li>
                    <a href="*">联系</a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="intro">
            <h1>大家好，我是侯春辉</h1>
            <p>我是一个前端迷，喜欢探索，喜欢研究，对一切未知而充满质感的事物充满好奇心，永远保持一颗真心</p>
            <p>青年一枚，执着于前端技术。heml5、css3、jacascript、jquery、vue.js、angularjs、angularjs、babel、sass、markdown、git等等都是我的最爱</p>
            <p>来吧，让我们一起来畅游前端的世界。模仿实现，但适度创意！！！</p>
        </section>
        <section class="inter">
            <h2>我的兴趣</h2>
            <div>
                <span>RWD</span>
                <p></p>
            </div>
            <div>
                <span>Flexbox</span>
                <p></p>
            </div>
            <div>
                <span>Sass</span>
                <p></p>
            </div>
            <div>
                <span>Less</span>
                <p></p>
            </div>
            <div>
                <span>Autoprefix</span>
                <p></p>
            </div>
            <div>
                <span>Grid</span>
                <p></p>
            </div>
            <div>
                <span>iHover</span>
                <p></p>
            </div>
            <div>
                <span>Animate.css</span>
                <p></p>
            </div>
        </section>
        <section class="example">
            <h2>项目实例</h2>
            <div>
                <img src="img/office.jpg" alt="">
                <span>代表项目</span>
                <p></p>
            </div>
            <div>
            <img src="img/office.jpg" alt="">
                <span>代表项目</span>
                <p></p>
            </div>
            <div>
                <img src="img/office.jpg" alt="">
                <span>代表项目</span>
                <p></p>
            </div>
            <div>
                <img src="img/office.jpg" alt="">
                <span>代表项目</span>
                <p></p>
            </div>
            <div>
                <img src="img/office.jpg" alt="">
                <span>代表项目</span>
                <p></p>
            </div>
            <div>
                <img src="img/office.jpg" alt="">
                <span>代表项目</span>
                <p></p>
            </div>
        </section>
    </main>
    <footer>
        <section>
        <h2>联系我们</h2>
        <p>前端技术发展非常迅速，个人视野有限，希望大家可以通过管饭的交流互动，实现共同提高！！期待您的回复！！</p>
        <div>
            <p>
                <span class="s1">邮箱</span>
                <span class="s2">916262537@qq.com</span>
            </p>
            <p class="p1">
                <span class="s3">QQ</span>
                <span class="s4">916262537</span>
            </p>
        </div>
        <form>
            <input placeholder="名字" type="text" name="" value="">
            <input placeholder="邮箱" type="emily" name="" value="">
            
        </form>
        <select name="input" id="">
            <option value="">兴趣</option>
            <option value="">爱好</option>
            <option value="">讨厌</option>
        </select><br>
        <div class="d1">
        <textarea placeholder="留言" cols=""></textarea>
        <input type="submit" value="提交信息">
        </div>
        <p>侯春辉版权所有，如有雷同，非常感谢</p>
        </section>
        
    </footer>
    <ul>
            <li>
                <a href="">顶部</a>
            </li>
        </ul>
</body>
</html>